<template>
  <div class="gray-page notify-page">
    <nav-bar title="消息提醒"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.origin" @click="getList(1)">
          <van-tab :title="item.description" :name="item.code" v-for="(item, key) in tabOptions" :key="key"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky class="page-scroll van-hairline--top" :offset-top="96">
        <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <div
                class="notify-message-item"
                v-for="(item, index) in listData"
                :key="index"
                @click="handleJumpDetail(item)"
              >
                <img src="@/assets/images/my/notify/bg_message@2x.png" class="notify-message-item--bg" alt="" />
                <div class="notify-message-item--content">
                  <span class="notify-message-item--dot" v-show="item.readStatus === '0'">
                    <van-badge dot></van-badge>
                  </span>
                  <p class="notify-message-item--title van-ellipsis">{{ item.name }}</p>
                  <van-row>
                    <van-col :span="18">
                      <p class="notify-message-item--name van-ellipsis">{{ item.deliveryUser }}</p>
                    </van-col>
                    <van-col :span="6" align="right">
                      <p class="notify-message-item--time">{{ item.deliveryTime }}</p>
                    </van-col>
                  </van-row>
                </div>
              </div>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 300px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import My from '@/api/my'
import List from '@/mixins/list'
export default {
  mixins: [List],
  data() {
    return {
      searchForm: {
        origin: 2,
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      tabOptions: [
        {
          description: '消息提醒',
          code: 2
        },
        {
          description: '平台提醒',
          code: 1
        }
      ],
      api: My.Notify
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleJumpDetail(item) {
      location.href = this.$config.path + `/my/notify/detail?code=${item.code}&name=${item.name}`
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/my/notify.less';
</style>
